import React, { useRef, useEffect, useState } from 'react';
import { Spin } from 'antd';
import {
  ProFormText,
  ModalForm,
  ModalFormProps,
  ProFormDigit,
  ProFormInstance,
  ProFormSelect,
  // ProFormDependency,
} from '@ant-design/pro-form';
import { services } from '@/network/api';

export type formProps = {
  id?: number;
  pid?: number;
  ptype?: number;
  _onFinish?: Function;
};

const getUserList = async (params: any) => {
  let res = await services.getUserList({ noPagination: true, noMsg: true });
  return res?.data?.map((item: any) => {
    return {
      label: item.name,
      value: item.id,
    };
  });
};

const TableForm: React.FC<ModalFormProps & formProps> = (props) => {
  const { visible, id, pid, ptype, _onFinish, ...restProps } = props;
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  const formRef = useRef<ProFormInstance<any>>();
  const [spinning, setSpinning] = useState(false);

  // 获取部门信息
  useEffect(() => {
    const getDepartment = async () => {
      setSpinning(true);
      if (id && visible) {
        let res = await services.getDepartment({ id });
        res.data.leaders = res?.data?.leaders?.map((item: any) => {
          return item.id;
        });

        formRef.current?.setFieldsValue(res?.data);
      } else {
        formRef.current?.resetFields();
        // formRef.current?.setFieldsValue({ type: ptype ? ptype + 1 : 1, pid });
      }
      setSpinning(false);
    };
    getDepartment();
  }, [id, visible]);

  const onFinish = async (values: any) => {
    await services.saveDepartment(values);
    _onFinish?.();
  };

  return (
    <>
      <ModalForm
        {...restProps}
        {...formItemLayout}
        formRef={formRef}
        title={id ? '编辑部门' : '新建部门'}
        width="500px"
        visible={visible}
        onFinish={onFinish}
        // initialValues={}
        layout="horizontal"
      >
        <Spin spinning={spinning}>
          <div className="hide">
            <ProFormDigit label="部门id" name="id" fieldProps={{ precision: 0, disabled: true }} />
          </div>
          <div className="hide">
            <ProFormDigit
              label="部门父id"
              name="pid"
              fieldProps={{ precision: 0, disabled: true }}
              initialValue={pid}
            />
          </div>
          <ProFormText
            label="部门名称"
            rules={[
              {
                required: true,
                message: '请输入部门名称',
              },
            ]}
            name="name"
          />
          <ProFormText
            label="部门电话"
            rules={[
              {
                pattern:
                  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
                message: '手机号格式不正确',
              },
            ]}
            name="phone"
          />
          {/* <ProFormSelect
            label="部门类型"
            name="type"
            // disabled
            rules={[
              {
                required: true,
                message: '请选择部门类型',
              },
            ]}
            options={[
              { label: '菜单', value: 1 },
              { label: '页面', value: 2 },
              { label: '按钮', value: 3 },
            ]}
          /> */}
          <ProFormSelect
            label="部门负责人"
            name="leaders"
            fieldProps={{ mode: 'multiple' }}
            request={getUserList}
          />
        </Spin>
      </ModalForm>
    </>
  );
};

export default TableForm;
